<template>
  <view class="service-info">
    <view class="service-info__header">
      <view class="service-info__title-area">
        <view class="service-info__title">{{ serviceInfo.name }}</view>
        <view class="service-info__tag" v-if="serviceInfo.tag">
          <text>{{ serviceInfo.tag }}</text>
        </view>
      </view>
      
      <view class="service-info__price-area">
        <view class="service-info__price-box">
          <text class="service-info__price-symbol">¥</text>
          <text class="service-info__price">{{ serviceInfo.price }}</text>
          <text class="service-info__original-price" v-if="serviceInfo.originalPrice">¥{{ serviceInfo.originalPrice }}</text>
        </view>
        <view class="service-info__discount" v-if="serviceInfo.discount">
          <text>{{ serviceInfo.discount }}</text>
        </view>
      </view>
      
      <view class="service-info__stats">
        <view class="service-info__stat-item">
          <text class="service-info__stat-value">{{ serviceInfo.sales }}</text>
          <text class="service-info__stat-label">已售出</text>
        </view>
        <view class="service-info__stat-divider"></view>
        <view class="service-info__stat-item">
          <text class="service-info__stat-value">{{ serviceInfo.rating }}%</text>
          <text class="service-info__stat-label">好评率</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  /**
   * 服务信息对象
   */
  serviceInfo: {
    type: Object,
    default: () => ({
      id: 0,
      name: '加载中...',
      price: 0,
      originalPrice: 0,
      discount: '',
      tag: '',
      sales: 0,
      rating: 0
    })
  }
});
</script>

<style lang="scss" scoped>
.service-info {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 12px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  
  &__header {
    width: 100%;
  }
  
  &__title-area {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
  
  &__title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-right: 10px;
    flex: 1;
  }
  
  &__tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px;
    color: #07c160;
    background-color: rgba(7, 193, 96, 0.1);
    border-radius: 4px;
  }
  
  &__price-area {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
  
  &__price-box {
    display: flex;
    align-items: baseline;
  }
  
  &__price-symbol {
    font-size: 18px;
    color: #f54242;
    font-weight: 500;
  }
  
  &__price {
    font-size: 28px;
    color: #f54242;
    font-weight: 600;
    margin-right: 8px;
  }
  
  &__original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
  }
  
  &__discount {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    color: #f54242;
    background-color: rgba(245, 66, 66, 0.1);
    border-radius: 4px;
    margin-left: 8px;
  }
  
  &__stats {
    display: flex;
    align-items: center;
  }
  
  &__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  &__stat-value {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 2px;
  }
  
  &__stat-label {
    font-size: 12px;
    color: #888;
  }
  
  &__stat-divider {
    width: 1px;
    height: 20px;
    background-color: #eee;
    margin: 0 15px;
  }
}
</style>
